<template>
  <div class="list">
    <NavbarIndex />
    <b-container>
      <!-- <b-breadcrumb :items="items" class="mt-3" /> -->
      <b-row>
        <div class="col-md-12 col-lg-8 col-xl-2 d-none d-xl-block">
          <div
            class="list-group text-center"
            v-for="(item, index) in catList"
            :key="index + '_a'"
          >
            <template v-if="item.id == pid || item.id == catId">
              <div class="list-group-item list-group-item-action active">相关频道</div>
              <router-link
                target="_blank"
                :to="'/list/' + item.id +'/' + item.pid"
                v-for="(item, index) in item._child"
                :key="index + '_b'"
                class="list-group-item list-group-item-action"
                :class="item.id == catId?'am-active':''"
              >{{item.title}}</router-link>
            </template>
          </div>
        </div>
        <div class="col-md-12 d-xl-none">
          <div
            v-for="(item, index) in catList"
            :key="index"
          >
            <template v-if="item.id == pid || item.id == catId">
              <router-link
                target="_blank"
                :to="'/list/' + item.id +'/' + item.pid"
                v-for="(item, index) in item._child"
                :key="index  + '_c'"
                :class="item.id == catId?'active':''"
                class="btn btn-outline-primary btn-md mr-1 mb-1"
              >{{item.title}}</router-link>
            </template>
          </div>
        </div>
        <div class="col-md-12 col-lg-8 col-xl-6">
          <router-link
            target="_blank"
            v-for="item in newsList"
            :key="item.id"
            :to="'/show/'+ item.id"
            :title="item.title"
          >
            <div class="text-left py-2 border-bottom">
              <h5 class="mt-0 text-dark">{{item.title}}</h5>
              <div class="d-flex">
                <img
                  class="mr-2 flex-shrink-0"
                  v-lazy="domain+item.thumb"
                  :alt="item.title"
                  v-if="item.thumb"
                  :key="item.thumb"
                />
                <div>
                  <small class="text-muted">{{item.create_time*1000 | formatDate}}</small>
                  <p
                    class="text-truncate-3 mb-0 text-muted"
                    v-html="item.description"
                  ></p>
                </div>

              </div>

            </div>
          </router-link>
          <div
            v-if="newsList.length > 0"
            class="text-center my-2"
          >
            <div
              class="btn btn-primary"
              @click="infiniteHandler($ite)"
            >加载更多</div>
          </div>
          <div v-else>
            <infinite-loading
              :identifier="infiniteId + '_f'"
              @infinite="infiniteHandler"
              ret="infiniteLoading"
            ></infinite-loading>
          </div>
        </div>
        <div class="col-md-12 col-lg-4 col-xl-4">
          <ExtranetAdvert />
        </div>
      </b-row>
    </b-container>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarIndex from "@/components/NavbarIndex.vue";
import FooterIndex from "@/components/FooterIndex.vue";
import ExtranetAdvert from "@/components/ExtranetAdvert.vue";
import InfiniteLoading from "vue-infinite-loading";
import { mapState, mapActions, mapMutations } from "vuex";
import { formatDate } from '../util/date.js';
export default {
  name: "home",
  components: {
    NavbarIndex,
    InfiniteLoading,
    FooterIndex,
    ExtranetAdvert
  },
  data: function () {
    return { domain: process.env.VUE_APP_baseURL, $ite: '' }
  },
  created () {
    this.newsListInit(this.catId);
    window.scrollTo(0, 0);
  },
  computed: {
    catId () {
      return this.$route.params.id;
    },
    infiniteId () {
      return this.$route.params.id;
    },
    pid () {
      return this.$route.params.pid;
    },
    ...mapState({
      catList: state => state.cat.catList,
      newsList: state => state.news.newsList
    }),
  },
  watch: {
    $route () {
      // 监听路由是否变化
      if (this.$route.params.id) {
        //判断id是否有值
        this.newsListInit(this.$route.params.id);
      }
    }
  },
  methods: {
    infiniteHandler ($state) {
      this.$ite = $state
      this.changeNewsList(this.catId).then(function (ret) {
        if (ret == 1) {
          $state.loaded();
        } else {
          $state.complete();
        }
      })
    },
    ...mapActions('news', ["changeNewsList"]),
    ...mapMutations('news', ["newsListInit"])
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>

<style scoped>
.text-truncate-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.list-group-item-action:hover {
  color: #007bff;
}
.list-group-item-action.active {
  color: #ffffff;
}
.list-group-item-action.am-active {
  color: #007bff;
}
.list-group-item-action.active:hover {
  color: #ffffff;
}
</style>
